<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>树组件 - layui</title>
    <link rel="stylesheet" href="../src/css/layui.css" media="all">
  </head>
  <body class="layui-padding-5">
    <div class="layui-btn-container">
      <button type="button" class="layui-btn" lay-on="getChecked">获取选中数据</button>
      <button type="button" class="layui-btn" lay-on="setChecked">设置节点勾选</button>
      <button type="button" class="layui-btn" lay-on="reload">重载实例</button>
    </div>

    <div id="test1"></div>
    <br><hr><br>
    <div id="test2"></div>
    <br><hr><br>
    <div id="test3"></div>

    <script src="../src/layui.js"></script>
    <script>
      layui.use(['tree', 'layer', 'util'], function() {
        var $ = layui.$;
        var tree = layui.tree;
        var layer = layui.layer;
        var util = layui.util;
        var index = 100;

        // 数据源
        var data1 = [
          {
            "title": "A-1",
            "id": 1,
            "children": [
              {
                "title": "B-1-1",
                "id": 3,
                "href": "",
                "children": [
                  {
                    "title": "C-1-1-3",
                    "id": 23,
                    "children": [
                      {
                        "title": "D-1-1-3-1",
                        "id": 24,
                        "children": [
                          {
                            "title": "E-1-1-3-1-1",
                            "id": 30
                          },
                          {
                            "title": "E-1-1-3-1-2",
                            "id": 31
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "title": "C-1-1-1",
                    "id": 7,
                    "checked": true,
                    "children": [
                      {
                        "title": "D-1-1-1-1",
                        "id": 15,
                        "href": ""
                      }
                    ]
                  },
                  {
                    "title": "C-1-1-2",
                    "id": 8,
                    "children": [
                      {
                        "title": "D-1-1-2-1",
                        "id": 32
                      }
                    ]
                  }
                ]
              },
              {
                "title": "B-1-2",
                "id": 4,
                "spread": true,
                "children": [
                  {
                    "title": "C-1-2-1",
                    "id": 9,
                    "checked": true,
                    "disabled": true
                  },
                  {
                    "title": "C-1-2-2",
                    "id": 10
                  }
                ]
              },
              {
                "title": "B-1-3",
                "id": 20,
                "children": [
                  {
                    "title": "C-1-3-1",
                    "id": 21
                  },
                  {
                    "title": "C-1-3-2",
                    "id": 22
                  }
                ]
              }
            ]
          },
          {
            "title": "A-2",
            "id": 2,
            "spread": true,
            "children": [
              {
                "title": "B-2-1",
                "id": 5,
                "spread": true,
                "children": [
                  {
                    "title": "C-2-1-1",
                    "id": 11
                  },
                  {
                    "title": "C-2-1-2",
                    "id": 12
                  }
                ]
              },
              {
                "title": "B-2-2",
                "id": 6,
                "checked": true,
                "children": [
                  {
                    "title": "C-2-2-1",
                    "id": 13
                  },
                  {
                    "title": "C-2-2-2",
                    "id": 14,
                    "disabled": true
                  }
                ]
              }
            ]
          },
          {
            "title": "A-3",
            "id": 16,
            "children": [
              {
                "title": "B-3-1",
                "id": 17,
                "fixed": true,
                "children": [
                  {
                    "title": "C-3-1-1",
                    "id": 18
                  },
                  {
                    "title": "C-3-1-2",
                    "id": 19
                  }
                ]
              },
              {
                "title": "B-3-2",
                "id": 27,
                "children": [
                  {
                    "title": "C-3-2-1",
                    "id": 28
                  },
                  {
                    "title": "C-3-2-2",
                    "id": 29
                  }
                ]
              }
            ]
          }
        ];

        // 数据源 2
        var data2 = [{title:'A-1',id:1,field:'name1',checked:true,spread:true,children:[{title:'B-1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'C-1-1-3',id:23,field:'',children:[{title:'D-1-1-3-1',id:24,field:'',children:[{title:'E-1-1-3-1-1',id:30,field:''},{title:'E-1-1-3-1-2',id:31,field:''}]}]},{title:'C-1-1-1',id:7,field:'',children:[{title:'D-1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'C-1-1-2',id:8,field:'',children:[{title:'D-1-1-2-1',id:32,field:''}]}]},{title:'B-1-2',id:4,spread:true,children:[{title:'C-1-2-1',id:9,field:'',disabled:true},{title:'C-1-2-2',id:10,field:''}]},{title:'B-1-3',id:20,field:'',children:[{title:'C-1-3-1',id:21,field:''},{title:'C-1-3-2',id:22,field:''}]}]},{title:'A-2',id:2,field:'',spread:true,children:[{title:'B-2-1',id:5,field:'',spread:true,children:[{title:'C-2-1-1',id:11,field:''},{title:'C-2-1-2',id:12,field:''}]},{title:'B-2-2',id:6,field:'',children:[{title:'C-2-2-1',id:13,field:''},{title:'C-2-2-2',id:14,field:'',disabled:true}]}]},{title:'A-3',id:16,field:'',children:[{title:'B-3-1',id:17,field:'',fixed:true,children:[{title:'C-3-1-1',id:18,field:''},{title:'C-3-1-2',id:19,field:''}]},{title:'B-3-2',id:27,field:'',children:[{title:'C-3-2-1',id:28,field:''},{title:'C-3-2-2',id:29,field:''}]}]}];

        // 数据源 3
        var data3 = [
          {
            "title": "节点 1",
            "id": "1000",
            "spread": true,
            "checked": true,
            "children": [
              {
                "title": "节点 1-1",
                "id": "1001",
                "spread": true,
                "checked": false
              },
              {
                "title": "节点 1-2",
                "id": "1002",
                "spread": true,
                "checked": true,
                "children": [
                  {
                    "title": "节点 1-2-1",
                    "id": "1003"
                  }
                ]
              }
            ]
          },
          {
            "title": "节点 2",
            "id": "2000",
          }
        ];

        // 实例 1
        var treeInst = tree.render({
          elem: '#test1',
          data: data1,
          click: function(obj) {
            layer.msg(JSON.stringify(obj.data));
            console.log(obj);
          },
          oncheck: function(obj) {
            // console.log(obj);
          },
          operate: function(obj) {
            var type = obj.type;
            if (type == 'add') {
              // ajax 操作，返回 key 值
              return index++;
            } else if(type == 'update') {
              console.log(obj.elem.find('.layui-tree-txt').html());
            } else if(type == 'del') {
              console.log(obj);
            };
          },
          showCheckbox: true,  // 是否显示复选框
          accordion: false,  // 是否开启手风琴模式
          onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
          isJump: 0,  // 点击文案跳转地址
          edit: true,  // 操作节点图标
          /*
          customName: { // 自定义 data 字段名
            children: 'nodes'
          }
          */
        });

        console.log(treeInst);
        console.log('flatData:', treeInst.config.flatData);

        // 按钮事件
        util.on({
          getChecked: function(othis) {
            var checkedData = tree.getChecked('test1');
            layer.alert(JSON.stringify(checkedData), {shade:0});
            console.log(checkedData);
          },
          setChecked: function() {
            tree.setChecked('test1', [11,12]);
          },
          reload: function(){
            tree.reload('test1', {});
          }
        });

        // 实例 2 - checked 测试
        tree.render({
          elem: '#test2',
          data: data3,
          showCheckbox: true,
        });

        // 实例 3 - 关闭连接线，箭头展开风格
        tree.render({
          elem: '#test3',
          data: data1,
          // expandClick: false,
          showLine: false, // 关闭连接线
          click: function(obj, state) {
            console.log(obj);
          },
          oncheck: function(obj, checked, child) {
            if (checked) {
              console.log(obj[0]);
            }
          },
          onsearch: function(data, num) {
            console.log(num);
          },
          dragstart: function(obj, parent) {
            console.log(obj, parent);
          },
          dragend: function(state, obj, target) {
            console.log(state, obj, target);
          }
        });
      });
    </script>
  </body>
</html>
